<template>
  <div class="leftMenu">
    <div class="avatar" :title="userId"></div>

    <el-menu
        active-text-color="rgb(7,193,96)"
        background-color="#2e2e2e"
        text-color="#fff"
        :default-active="defaultActive"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"

    >
<!--      <el-menu-item index="1">-->
<!--        <el-icon size="80"><ChatRound /></el-icon>-->
<!--        <template #title>聊天</template>-->
<!--      </el-menu-item>-->

      <el-menu-item v-for="(item,index) in menuItem.menuList"  :index="index+1" teleported="false">
        <el-icon :size="menuItem.size"><component :is="item.icon" ></component></el-icon>
        <template #title>{{item.title}}</template>
      </el-menu-item>

    </el-menu>
  </div>

</template>

<script>
export default {
  name: "LeftMenu",
  props:["userId"],
  data(){
    return{
      isCollapse:true,
      menuItem:{"size":100,menuList:[{"icon":"ChatRound","title":"聊天"},
          {"icon":"Memo","title":"通讯录"},{"icon":"Star","title":"收藏"},
          {"icon":"setting","title":"设置"}]},
      defaultActive:0

    }
  },
  mounted() {
   this.defaultActive=1;
  },
  methods:{
    handleOpen:function (key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose:function (key, keyPath) {
      console.log(key, keyPath);
    }
  }

}
</script>

<style scoped>

</style>